<template>
  <el-dialog v-loading="loading" :append-to-body="true" :close-on-click-modal="false" :visible.sync="visable" title="学习交流申请详情" width="860px" top="3vh" @close="closeDlg">
    <table class="billinfo-table" width="100%">
      <tr>
        <td colspan="2"><div class="bill-item"><label>申请标题</label><p>{{ entity.applyName }}</p></div></td>
      </tr>
      <tr>
        <td width="50%"><div class="bill-item"><label>申请人</label><p>{{ entity.applicantName }}</p></div></td>
        <td width="50%"><div class="bill-item"><label>申请时间</label><p>{{ entity.applyTime | parseTime("{y}-{m}-{d}") }}</p></div></td>
      </tr>
      <tr>
        <td><div class="bill-item"><label>学习交流名称</label><p>{{ entity.name }}</p></div></td>
        <td><div class="bill-item"><label>所属部门</label><p>{{ entity.deptName }}</p></div></td>
      </tr>
      <tr>
        <td><div class="bill-item"><label>组织单位</label><p>{{ entity.organization }}</p></div></td>
        <td><div class="bill-item"><label>授课教师</label><p>{{ entity.teacher }}</p></div></td>
      </tr>
      <tr>
        <td><div class="bill-item"><label>开始时间</label><p>{{ entity.startTime | parseTime("{y}-{m}-{d}") }}</p></div></td>
        <td><div class="bill-item"><label>结束时间</label><p>{{ entity.endTime | parseTime("{y}-{m}-{d}") }}</p></div></td>
      </tr>
      <tr>
        <td><div class="bill-item"><label>学习课时</label><p>{{ entity.period }}</p></div></td>
        <td />
      </tr>
      <tr>
        <td colspan="2"><div class="bill-item"><label>学习内容</label><p>{{ entity.content }}</p></div></td>
      </tr>
      <tr>
        <td><div class="bill-item"><label>培训地址</label><p>{{ entity.address }}</p></div></td>
        <td><div class="bill-item-1"><label>学习成果、成绩</label><p>{{ entity.grade }}</p></div></td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="bill-item-1"><label>附件</label>
            <p>
              <a v-for="(po) in appendFileList" :key="po.url" :download="po.name" :href="po.url" style="margin-bottom:8px;display: block" target="_blank">{{ po.name }}</a>
            </p>
          </div>
        </td>
      </tr>
      <tr class="approve-tr">
        <td colspan="2"><div class="bill-item"><label>状态</label><p>{{ entity.statusName }}</p></div></td>
      </tr>
      <tr class="approve-tr">
        <td colspan="2">
          <div class="bill-item">
            <label>审批人</label><span class="content-span">{{ entity.approveName }}</span>
            <label>审批时间</label><span class="content-span">{{ entity.approveTime | parseTime("{y}-{m}-{d} {h}:{i}") }}</span></div></td>
      </tr>
      <tr class="approve-tr">
        <td colspan="2">
          <div class="approve-msg-box">
            <label>审批过程：</label>
            <div v-for="(po) in approveComments" :key="po.id" class="approve-msg-item">
              <p>审批意见：{{ po.message }}</p>
              <p style="text-align-right">审批人：{{ po.userName }} <span style="margin-left:12px;">{{ po.createTime| parseTime("{y}-{m}-{d} {h}:{i}") }}</span></p>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'TrainingShow',
  data() {
    return {
      loading: false,
      visable: false,
      entity: {
        id: null,
        name: '',
        startTime: '',
        endTime: '',
        period: '',
        organization: '',
        teacher: '',
        content: '',
        address: '',
        grade: '',
        appendFiles: null
      },
      appendFileList: [],
      approveComments: []
    }
  },
  methods: {
    cancel() {
      this.closeDlg()
    },
    show(id) {
      request({ url: '/edu/training/' + id, method: 'get' }).then(data => {
        this.entity = data
        // appenfile
        if (this.entity.appendFiles) {
          this.appendFileList = JSON.parse(this.entity.appendFiles)
        }
        this.visable = true
      }).catch(err => {
        this.$message.error(err.message)
      })
      // history comment
      request({ url: '/edu/training/findCommentsById', method: 'get', params: { id: id }}).then(data => {
        this.approveComments = data
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    closeDlg() {
      this.approveComments = []
      this.visable = false
    }
  }
}
</script>
